<template>
	<view>
		<view class="box">
			<view class="re">

				<swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :interval="2000"
					:duration="500" style="width: 750rpx;height: 694rpx;">
					<swiper-item class="wp100 vt" v-for="item,index in bannerList" :key="index" @transition="pause"
						@change="pause">
						<view style="background-color: #000000;height: 694rpx;" v-if="item.type == 'video'">
							<video :src="item.url" :autoplay="true" :muted="false" play-btn-position="center"
								show-mute-btn="true" class="wp100 vt" style="width: 750rpx;height: 648rpx;"></video>
						</view>

						<image :src="item.url" v-if="item.type == 'image'" class="wp100 vt"
							style="width: 750rpx;height: 694rpx;" mode="aspectFill"></image>
					</swiper-item>
				</swiper>

			</view>

			<view class="pl30 pr30">
				<view class="area_block_1">
					<view class="flex_box">
						<view class="ml20 mr20 re w154">
							<view class="logo_pos_box">
								<image
									:src="brandInfo.logo ? brandInfo.logo + '?x-oss-process=image/auto-orient,1/resize,m_lfit,w_350/quality,q_90' : '/static/brand_logo_2.png'"
									class="logo_pos" mode="aspectFit"></image>
							</view>
							
						</view>
						<view class="item">
							<view class="fs30 lh40 cor_000">
								{{brandInfo && brandInfo.englishName ? brandInfo.englishName : (brandInfo && brandInfo.name ? brandInfo.name : '')}}
							</view>
						</view>
					</view>
					
					<view class="mt30 ">
						<view class="flex_box aic" style="justify-content: flex-end">
							<view class="ml35 btn_1 tac" style="width: 200rpx;" @click="popupShow();">INTRODUCTION
							</view>
						</view>
					</view>

					
					

					<view class="mt55 area_block_2">
						<view class="flex_box aic">
							<view class="item">
					
								<view class="mt10 fs24 cor_555 flex_box">
									<view class="lh32">SECTORS :</view>
									<view class="item lh32 pl20">
					
										<text class="" v-if="brandInfo.type == 1">COSMETICS</text>
										<text class="" v-if="brandInfo.type == 2">PROFESSIONAL BEAUT</text>
										<text class="" v-if="brandInfo.type == 3">SUPPLY CHAIN</text>
										<text class="" v-if="brandInfo.type == 4">SERVICES</text>
									</view>
								</view>
					
								<view class="mt10 fs24 cor_555 flex_box" v-if="brandInfo.categoryEnName">
									<view class="lh32">CATEGORY :</view>
									<view class="item lh32 pl20">
										{{brandInfo.categoryEnName}}
					
									</view>
								</view>
					
								<view class="mt10 fs24 cor_555 flex_box" v-if="brandInfo.areaEnName">
									<view class="lh32">COUNTRIES/REGIONS :</view>
									<view class="item lh32 pl20">
										{{brandInfo.areaEnName}}
					
									</view>
								</view>
					
								<view class="mt10 fs24 cor_555 flex_box" v-if="brandInfo.showroom">
									<view class="lh32">HALL :</view>
									<view class="item lh32 pl20">
										{{brandInfo.showroom}}
					
									</view>
								</view>
					
								<view class="mt10 fs24 cor_555 flex_box" v-if="brandInfo.showroom">
									<view class="lh32">STAND NO. :</view>
									<view class="item lh32 pl20">
										{{brandInfo.boothNumber}}
					
									</view>
								</view>
					
							</view>
					
						</view>
					</view>

				</view>






			</view><!-- pl30 pr30 -->

			<view class="bottom_btn_fix df aic">
				<view class="flex_box aic jcsba fs24 fwb"
					style="width: 100%;height:80rpx;margin: 0 auto;background: #FFFFFF;border-top: 4rpx solid #F9F9F9;">
					<view class="" @tap="toIndex()">Return to the exhibitor directory <img src="/static/return.png"
							style="widht: 24rpx;height: 24rpx;margin-left: 20rpx;"></view>
				</view>
			</view>
		</view><!-- box -->

		<u-popup :show="show" :round="16" mode="bottom" @close="popupClose" :closeOnClickOverlay="true">
			<view class="popup_area_sty pb25">
				<view class="re pt40 pb40 bb1">
					<view class="fs30 fwb cor_000 tac">INTRODUCTION</view>
					<view class="close_popup_pos df aic" @click="popupClose();">
						<image src="/static/icon_close.png" class="img7"></image>
						<text class="ml20 fs24 fwb cor_000">CLOSE</text>
					</view>
				</view>
				<view class="mt30 scroll_h_box">
		
		
		
					<view class="mt10">
		
						<view class="mt10 fs24 lh34 cor_555">
							<view style="white-space:pre-wrap;">
								{{brandInfo.introduction ? brandInfo.introduction : 'NOT DATA HERE'}}
							</view>
						</view>
					</view>
		
		
		
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		toast,
		showLoading,
		hideLoading
	} from '@/utils/toast.js';
	import {
		getBrandInfoByIdApi,
		addVisitLogApi,
		aliTranslateApi,
getFactoryExhibitorById
	} from '@/http/api.js'

	export default {

		data() {
			return {
				id: 0,
				channelType: '',
				productType: '',
				type: 1,
				brandInfo: {

				},
				imageUrl: '',
				compositeType: 0,
				sourceId: 0,
				bannerList: [],
				autoplay: true,
				show: false,

			}
		},

		onLoad(e) {

			if (e.id) {
				this.id = e.id.toString();
			} else {
				toast('缺少参数id！');
			}
			if (e.type) {
				this.type = e.type;
			}
			if (e.advertId) {
				this.advertId = e.advertId;
			}


			this.sourceId = this.id.toString();
			this.compositeType = this.type;
			this.BrandInfoById();
		},


		methods: {
			popupShow: function() {
				this.show = true
			},
			popupClose: function() {
				this.show = false
			},


			toIndex() {
				uni.navigateTo({
					url: '/pages/Exhibitor_directory/Exhibitor_directory'
				})
			},

			BrandInfoById() {
				let that = this;
				let param = '/' + this.id ;
				showLoading('loading')
				getFactoryExhibitorById({
					param: param
				}).then(res => {

					this.addVisitLog(this.id);
					this.brandInfo = res.data;

					let p = this.brandInfo.logo.split(',');
					this.brandInfo.logo = p[0]  || '';
					this.brandInfo.categoryEnName = this.brandInfo.categoryEnName.toUpperCase();
			
	
					let bannerList = [];
					let bannerPic = {
						url: this.brandInfo.logo,
						type: 'image'
					}
					bannerList.push(bannerPic);
					this.bannerList = bannerList;
					var that = this;
					aliTranslateApi({
						formatType: 'text',
						sourcelanguage: 'zh',
						sourceText: that.brandInfo.introduction,
						targetLanguage: 'en'
					}).then(res => {
						that.brandInfo.introduction = res.data;
						hideLoading();
					}).catch(err => {
						hideLoading();
					})


				

					hideLoading();
				}).catch(err => {
					hideLoading();
					toast(err.msg);
				})
			},

			getDateFromString(str) {
				var reg = /^(\d+)-(\d+)-(\d+) (\d+):(\d+):(\d+)/;
				var s = str.match(reg);
				var result = "";
				if (s) {
					result = new Date(s[1], s[2] - 1, s[3], s[4], s[5], s[6]);
				}
				return result;
			},

			/**
			 * 集团页面
			 */
			toGroupDetail(id) {
				uni.navigateTo({
					url: '/pages/Group_page/Group_page?id=' + id
				})
			},


			/**
			 * 进入产品详情页
			 */
			toProduct: function(id, type, name) {

				let url = '/pages/brand/product?id=' + id + '&type=3';

				uni.navigateTo({
					url: url
				})
			},

			handletouchstart() {
				this.showAni = true;
				console.log("触摸滑动了");
			},

			addVisitLog(companyId) {
				let sourceType = 1;
				if (this.type != 1 && this.type != '1') {
					sourceType = 3;
				}
				let params = {
					sourceId: this.id,
					sourceType: sourceType,
					companyId: companyId,
				}
				if (this.advertId) {
					params.advertId = this.advertId
				}
				addVisitLogApi(params).then(res => {

				})

			},



		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}

	.nav_scroll_x .active.nav_item::after,
	.nav_scroll_x_2 .active.nav_item::after {
		content: "";
		position: absolute;
		bottom: -10rpx;
		left: 50%;
		width: 160rpx;
		height: 15rpx;
		background: linear-gradient(132deg, #22DDB2 0%, #009FF5 100%);
		border-radius: 8rpx;
		z-index: 2;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}

	.nav_scroll_x .nav_item {
		margin-right: 20rpx;
	}

	.icon_size_1 {
		width: 130rpx;
		height: 40rpx;
	}

	.degree_of_heat {
		position: absolute;
		top: 60rpx;
		right: 55rpx;
		padding: 0 15rpx;
		height: 46rpx;
		font-size: 20rpx;
		color: #fff;
		background: rgba(0, 0, 0, 0.4);
		border-radius: 23rpx;
		z-index: 2;
	}



	.area_block_1 {
		position: relative;
		padding: 20rpx 20rpx 32rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 38rpx 0px rgba(0, 0, 0, 0.1);
		border-radius: 16rpx;
		margin-top: -60rpx;
	}

	.area_block_2 {
		position: relative;
		padding: 25rpx 35rpx;
		background: #F9F9F9;
		border-radius: 20rpx;
	}

	.logo_pos_box {
		position: absolute;
		top: -42rpx;
		left: 0;
		width: 158rpx;
		height: 158rpx;
		border: 2px solid #F2F3F5;
		border-radius: 50%;
		z-index: 2;
		background-color: #FFFFFF;
	}

	.logo_pos {
		/* position: absolute;
		top: -42rpx;
		left: 0; */
		width: 150rpx;
		height: 150rpx;

		border-radius: 50%;
		z-index: 2;
	}

	.tags_1 {
		/* padding: 0 15rpx; */
		height: 36rpx;
		font-size: 20rpx;
		/* color: #FCAE32;
		background: #FFF4E1;
		border-radius: 18rpx;
		border: 2rpx solid #FFEDD0; */
		margin-right: 8rpx;
	}

	.tags_2 {
		display: inline-block;
		padding: 0 10rpx;
		min-height: 35rpx;
		line-height: 35rpx;
		font-size: 20rpx;
		color: #555555;
		background-color: #F3F4F7;
		border-radius: 10rpx;
	}

	.tags_3 {
		position: absolute;

		bottom: -40rpx;

		padding: 0 12rpx;
		height: 35rpx;
		font-size: 20rpx;
		color: #fff;
		background: linear-gradient(132deg, #22DDB2 0%, #009FF5 100%);
		border-radius: 6rpx;
		transform: translateX(-50%);
		z-index: 3;
	}

	.btn_1 {
		padding: 0 10rpx;
		height: 45rpx;
		line-height: 45rpx;
		font-size: 20rpx;
		color: #555;
		background: #EEEEEE;
		border-radius: 23rpx;
	}

	.line_ver_bor {
		width: 1px;
		height: 40rpx;
		background-color: #EEEEEE;
	}

	.img_size {
		width: 325rpx;
		height: 325rpx;
		object-fit: cover;
		border-radius: 12rpx;
	}

	.bottom_btn_fix {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		padding-bottom: env(safe-area-inset-bottom);
		height: calc(96rpx + env(safe-area-inset-bottom));
		background-color: #fff;
		z-index: 3;
	}

	.trade_docking_btn {
		width: 308rpx;
		height: 76rpx;
		font-size: 24rpx;
		color: #fff;
		background: linear-gradient(132deg, #22DDB2 0%, #009FF5 100%);
		border-radius: 20rpx;
	}

	.popup_area_sty {
		padding: 0 30rpx 25rpx;
		background-color: #fff;
		border-radius: 16rpx 16rpx 0 0;
	}

	.scroll_h_box {
		max-height: 560rpx;
		overflow-y: auto;
	}

	.close_popup_pos {
		position: absolute;
		top: 50%;
		right: 0;
		z-index: 2;
		transform: translateY(-50%);
	}




	/**弹窗**/
	.poster-canvas {
		position: fixed;
		top: -10000rpx;
		left: 0rpx;
		width: 600rpx;
		height: 920rpx;
	}

	.share-mask {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, .5);
		z-index: 99;
	}

	.share-container {
		position: absolute;
		left: 130rpx;
		top: 100rpx;
		width: 500rpx;
		height: 890rpx;
		background: #FFFFFF;
	}

	.share-til {
		width: 100%;
		margin-top: 40rpx;
		padding: 0 30rpx;
		font-size: 28rpx;
		color: #222222;
	}

	.share-price {
		margin-top: 50rpx;
		padding: 0 30rpx;
		font-size: 28rpx;
		color: #222222;
	}

	.share-code {
		position: absolute;
		// right: 30rpx;
		// bottom: 30rpx;
		left: 392rpx;
		top: 708rpx;
		width: 178rpx;
		height: 178rpx;
		background-color: #fff;
	}

	.share-bot {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 300rpx;
		background: #FFFFFF;
	}

	.share-btns {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 180rpx;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #EEEEEE;

	}

	.btns-list {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex: 1;
		height: 100%;
		justify-content: center;
	}

	.btn {
		width: 60rpx;
		height: 60rpx;
	}

	.share-cancel {
		width: 100%;
		font-size: 24rpx;
		color: #222222;
		line-height: 90rpx;
		text-align: center;
	}

	button::after {
		border: none;
	}

	.back_btn {
		position: absolute;
		top: 60rpx;
		left: 55rpx;
		height: 46rpx;
		font-size: 20rpx;
		border-radius: 23rpx;
		z-index: 2;
	}

	.back_btn .back_icon {
		width: 60rpx;
		height: 60rpx;
	}

	.corner_mask_pos {
		position: relative;
		top: 100rpx;
		right: -190rpx;
		width: 150rpx;
		height: 87rpx;
		z-index: 2;
	}
</style>